<template>
  <view class="search-bar" :class="{ focused: isFocused, expanded: showFilters }">
    <view class="search-input-wrapper">
      <uni-search-bar 
        v-model="searchValue"
        :placeholder="placeholder"
        :focus="autoFocus"
        @focus="onFocus"
        @blur="onBlur"
        @confirm="onSearch"
        @clear="onClear"
        @input="onInput"
      />
      
      <!-- 筛选按钮 -->
      <view class="filter-btn" v-if="showFilterButton" @click="toggleFilters">
        <uni-icons type="sound" size="20" :color="hasActiveFilters ? '#1890FF' : '#999'" />
      </view>
    </view>
    
    <!-- 筛选面板 -->
    <view class="filter-panel" v-if="showFilters">
      <slot name="filters"></slot>
      
      <view class="filter-actions" v-if="showFilterActions">
        <button class="filter-action-btn reset" @click="onResetFilters">
          重置
        </button>
        <button class="filter-action-btn confirm" @click="onConfirmFilters">
          确定
        </button>
      </view>
    </view>
    
    <!-- 搜索建议 -->
    <view class="search-suggestions" v-if="showSuggestions && suggestions.length > 0">
      <view 
        class="suggestion-item"
        v-for="(item, index) in suggestions"
        :key="index"
        @click="onSelectSuggestion(item)"
      >
        <uni-icons type="search" size="16" color="#999" />
        <text class="suggestion-text">{{ item }}</text>
      </view>
    </view>
    
    <!-- 历史搜索 -->
    <view class="search-history" v-if="showHistory && searchHistory.length > 0">
      <view class="history-header">
        <text class="history-title">搜索历史</text>
        <button class="clear-history-btn" @click="onClearHistory">
          <uni-icons type="trash" size="16" color="#999" />
        </button>
      </view>
      <view class="history-tags">
        <view 
          class="history-tag"
          v-for="(item, index) in searchHistory"
          :key="index"
          @click="onSelectHistory(item)"
        >
          <text class="history-text">{{ item }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue';

// Props
interface Props {
  modelValue?: string;
  placeholder?: string;
  autoFocus?: boolean;
  showFilterButton?: boolean;
  showFilterActions?: boolean;
  hasActiveFilters?: boolean;
  suggestions?: string[];
  showSuggestions?: boolean;
  searchHistory?: string[];
  showHistory?: boolean;
  maxHistory?: number;
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: '',
  placeholder: '请输入搜索关键词',
  autoFocus: false,
  showFilterButton: false,
  showFilterActions: true,
  hasActiveFilters: false,
  suggestions: () => [],
  showSuggestions: false,
  searchHistory: () => [],
  showHistory: false,
  maxHistory: 10,
});

// Emits
const emit = defineEmits<{
  'update:modelValue': [value: string];
  search: [keyword: string];
  clear: [];
  input: [value: string];
  focus: [];
  blur: [];
  toggleFilters: [];
  resetFilters: [];
  confirmFilters: [];
  selectSuggestion: [suggestion: string];
  selectHistory: [history: string];
  clearHistory: [];
}>();

// 响应式数据
const searchValue = ref(props.modelValue);
const isFocused = ref(false);
const showFilters = ref(false);

// 监听外部值变化
watch(() => props.modelValue, (newValue) => {
  searchValue.value = newValue;
});

// 监听内部值变化
watch(searchValue, (newValue) => {
  emit('update:modelValue', newValue);
});

// 事件处理
const onFocus = () => {
  isFocused.value = true;
  emit('focus');
};

const onBlur = () => {
  isFocused.value = false;
  emit('blur');
};

const onSearch = () => {
  emit('search', searchValue.value);
};

const onClear = () => {
  searchValue.value = '';
  emit('clear');
};

const onInput = (value: string) => {
  emit('input', value);
};

const toggleFilters = () => {
  showFilters.value = !showFilters.value;
  emit('toggleFilters');
};

const onResetFilters = () => {
  emit('resetFilters');
};

const onConfirmFilters = () => {
  showFilters.value = false;
  emit('confirmFilters');
};

const onSelectSuggestion = (suggestion: string) => {
  searchValue.value = suggestion;
  emit('selectSuggestion', suggestion);
  emit('search', suggestion);
};

const onSelectHistory = (history: string) => {
  searchValue.value = history;
  emit('selectHistory', history);
  emit('search', history);
};

const onClearHistory = () => {
  emit('clearHistory');
};
</script>

<style lang="scss" scoped>
.search-bar {
  background: #fff;
  transition: all 0.3s ease;
  
  &.focused {
    box-shadow: 0 2rpx 12rpx rgba(24, 144, 255, 0.15);
  }
  
  &.expanded {
    border-radius: 16rpx 16rpx 0 0;
  }
}

.search-input-wrapper {
  display: flex;
  align-items: center;
  padding: 16rpx 24rpx;
  
  .filter-btn {
    margin-left: 16rpx;
    padding: 12rpx;
    border-radius: 8rpx;
    background: #f5f5f5;
    
    &:active {
      background: #e6f7ff;
    }
  }
}

.filter-panel {
  padding: 24rpx;
  border-top: 1rpx solid #f0f0f0;
  background: #fafafa;
  
  .filter-actions {
    display: flex;
    gap: 16rpx;
    margin-top: 24rpx;
    
    .filter-action-btn {
      flex: 1;
      height: 64rpx;
      border-radius: 8rpx;
      font-size: 26rpx;
      border: none;
      
      &.reset {
        background: #f5f5f5;
        color: #666;
      }
      
      &.confirm {
        background: #1890FF;
        color: #fff;
      }
    }
  }
}

.search-suggestions,
.search-history {
  background: #fff;
  border-top: 1rpx solid #f0f0f0;
}

.search-suggestions {
  .suggestion-item {
    display: flex;
    align-items: center;
    padding: 24rpx;
    border-bottom: 1rpx solid #f9f9f9;
    gap: 16rpx;
    
    &:last-child {
      border-bottom: none;
    }
    
    &:active {
      background: #f5f5f5;
    }
    
    .suggestion-text {
      font-size: 28rpx;
      color: #333;
    }
  }
}

.search-history {
  padding: 24rpx;
  
  .history-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16rpx;
    
    .history-title {
      font-size: 26rpx;
      color: #666;
    }
    
    .clear-history-btn {
      background: none;
      border: none;
      padding: 8rpx;
    }
  }
  
  .history-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 16rpx;
    
    .history-tag {
      background: #f5f5f5;
      border-radius: 20rpx;
      padding: 12rpx 24rpx;
      
      &:active {
        background: #e6f7ff;
      }
      
      .history-text {
        font-size: 24rpx;
        color: #666;
      }
    }
  }
}
</style>